<%@ page contentType="text/html;charset=UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<link href="${pageContext.request.contextPath}/libraries/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="${pageContext.request.contextPath}/assets/css/style.css" rel="stylesheet" />
<!-- JAVASCRIPT -->
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/share/jquery.min.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath}/libraries/bootstrap/js/bootstrap.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/news/indexnewsScript.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/share/script.js"></script>  
<!-- END JAVASCRIPT -->
</head>

<body>
	
	<div class="container">
		<!-- BEGIN SLIDER -->
		<div id="carousel-example-generic" class="carousel slide"
			data-ride="carousel">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0"
					class="active"></li>
				<li data-target="#carousel-example-generic" data-slide-to="1"></li>
				<li data-target="#carousel-example-generic" data-slide-to="2"></li>
			</ol>

			<!-- Wrapper for slides -->
			<div class="carousel-inner">

				<!-- Begin Slide Item-->
				<div class="item active">
					<img
						src="${pageContext.request.contextPath}/assets/images/slider1.jpg"
						width="1170" height="418" alt="Slider Demo 1">
					<div class="carousel-caption"></div>
				</div>
				<!-- END Slide Item-->

				<!-- Begin Slide Item-->
				<div class="item">
					<img
						src="${pageContext.request.contextPath}/assets/images/slider2.jpg"
						width="1170" height="418" alt="Slider Demo 2">
					<div class="carousel-caption"></div>
				</div>
				<!-- END Slide Item-->

				<!-- Begin Slide Item-->
				<div class="item">
					<img
						src="${pageContext.request.contextPath}/assets/images/slider3.jpg"
						width="1170" height="418" alt="Slider Demo 3">
					<div class="carousel-caption"></div>
				</div>
				<!-- END Slide Item-->

			</div>

			<!-- Controls -->
			<a class="left carousel-control" href="#carousel-example-generic"
				data-slide="prev"> <span
				class="glyphicon glyphicon-chevron-left"></span>
			</a> <a class="right carousel-control" href="#carousel-example-generic"
				data-slide="next"> <span
				class="glyphicon glyphicon-chevron-right"></span>
			</a>
		</div>

		<!-- END SLIDER -->

		<div class="row mt-20">
			<div class="col-md-4 col-xs-12 col-md-push-8 mb-20">
				<c:set var="typeForm" scope="request" value="${vaTypeForm}" />
				<c:choose>
					<c:when test="${typeForm != null && typeForm=='forgetPassword'}">
						<div class='box'>
							<div id='login-box' style="min-width: 360px; min-height: 313px;">
								<div class='line-header'>
									<i class='fa fa-lock'></i> ลืมรหัสผ่าน
								</div>
								<div class='box-detail'>
									<form action='${pageContext.request.contextPath}/IdentifyUserSrvl' name='loginForm' method='post'>
										<div class='form-group'>
											<label for='exampleInputEmail1'>ชื่อผู้ใช้ </label> <input
												type='text' class='form-control' placeholder='ชื่อผู้ใช้'
												name='username' id='inputUsername' value='${UserName}'>
												<input type='hidden' class='form-control' name='contextPath' id='contextPath' value='${pageContext.request.contextPath}'>
										</div>
										<div class='clearfix'>
											<button type='submit' class='btn btn-primary pull-right' style="min-width: 84px;">ตกลง</button>
											<label style="color: red;">
												${vaForgetPasswordMessageError}</label>
										</div>

										<div class='mt-20 clearfix'>
											<div class='pull-right mt-5' align='right'>
												<a href='${pageContext.request.contextPath}/index.jsp'> <i class='fa fa-user'></i>
													เข้าสู่ระบบ
												</a>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
					</c:when>

					<c:otherwise>
						<div class="box">
							<div id="login-box" style="min-width: 360px; min-height: 313px;">
								<div class="line-header">
									<i class="fa fa-user"></i> ลงชื่อเข้าใช้
								</div>
								<div class="box-detail">
									<form action="${pageContext.request.contextPath}/LoginSrvl" name="loginForm" method="post">
										<div class="form-group">
											<label for="exampleInputEmail1">ชื่อผู้ใช้</label> <input
												type="text" class="form-control" placeholder="ชื่อผู้ใช้"
												name="username" id="inputUsername" value="${UserName}">
										</div>
										<div class="form-group">
											<label for="exampleInputPassword1">รหัสผ่าน</label> <input
												type="password" class="form-control" placeholder="รหัสผ่าน"
												name="password" id="inputPassword">
										</div>
										<div class='clearfix'>
											<input type="hidden" id="url_address" name="url_address" value="">
											<input type="hidden" id="agent_browser" name="agent_browser" value="">
											<button type="submit" class="btn btn-primary pull-right">เข้าสู่ระบบ</button>
											<label style='color: red;'>${vaLoginMessageError}</label>
										</div>
										<div class="mt-20 clearfix">
											<div class="pull-right mt-5" align="right">
												<a href="javascript:void()" onclick="forgetPassword();"><i
													class="fa fa-lock"></i> ลืมรหัสผ่าน</a>
											</div>
										</div>
									</form>
								</div>
								<!-- End login-form -->
							</div>
						</div>
					</c:otherwise>
				</c:choose>
			</div>
			<!-- End col-md-4 -->

			<div class="modal fade" id="successForgetModal" tabindex="-1"
				role="dialog" aria-labelledby="successForgetModal"
				aria-hidden="true">
				<div class="modal-dialog modal-sm">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-hidden="true">&times;</button>
							<h4 class="modal-title">
								 ตรวจสอบอีเมลของคุณ
							</h4>
						</div>
						<div class="modal-body">ตรวจสอบอีเมลของคุณ
							ระบบได้ทำการส่งลิงก์เพื่อกำหนดรหัสผ่านใหม่ไปที่อีเมลของคุณแล้ว</div>
						<div class="modal-footer" style="text-align: center;">
							<button type="button" class="btn btn-primary"
								data-dismiss="modal">ตกลง</button>
						</div>
					</div>
				</div>
			</div>
			<div class="modal fade" id="successRecoverModal" tabindex="-1"
				role="dialog" aria-labelledby="successRecoverModal"
				aria-hidden="true">
				<div class="modal-dialog modal-sm">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-hidden="true">&times;</button>
							<h4 class="modal-title">
								เปลี่ยนรหัสผ่านสำเร็จ
							</h4>
						</div>
						<div class="modal-body">
							ระบบได้ทำการเปลี่ยนรหัสผ่านใหม่ให้คุณเรียบร้อยแล้ว</div>
						<div class="modal-footer" style="text-align: center;">
							<button type="button" class="btn btn-primary"
								data-dismiss="modal">ตกลง</button>
						</div>
					</div>
				</div>
			</div>
			<div class="modal fade" id="ExpiredModal" tabindex="-1"
				role="dialog" aria-labelledby="successRecoverModal"
				aria-hidden="true">
				<div class="modal-dialog modal-sm">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-hidden="true">&times;</button>
							<h4 class="modal-title">
								ลิ้งก์ของคุณหมดอายุ
							</h4>
						</div>
						<div class="modal-body">
							ลิ้งก์ของคุณหมดอายุ กรุณาทำการระบุชื่อผู้ใช้ใหม่</div>
						<div class="modal-footer" style="text-align: center;">
							<button type="button" class="btn btn-primary"
								data-dismiss="modal">ตกลง</button>
						</div>
					</div>
				</div>
			</div>
			
			<div class="col-md-8 col-xs-12 col-md-pull-4 pt-10">
				<div class="line-header">
					<i class="fa fa-bullhorn"></i> Infomation
				</div>
				<div class="box-detail">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
						vel leo vitae mi iaculis tincidunt. Sed ipsum diam, semper et
						adipiscing sit amet, gravida ac ipsum. Phasellus rutrum est non
						eros ultrices a molestie tellus suscipit. Nunc eleifend, nisl vel
						cursus hendrerit, arcu risus sagittis lorem, nec gravida massa
						lacus non nulla. Praesent urna diam, cursus ac eleifend mattis,
						euismod et nisi. Vestibulum id leo sit amet nisi. Aliquam erat
						volutpat. Nam egestas mollis ultrices. Praesent nec tellus est, et
						convallis mauris.</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
						vel leo vitae mi iaculis tincidunt. Sed ipsum diam, semper et
						adipiscing sit amet, gravida ac ipsum. Phasellus rutrum est non
						eros ultrices a molestie tellus suscipit. Nunc eleifend, nisl vel
						cursus hendrerit, arcu risus sagittis lorem, nec gravida massa
						lacus non nulla. Praesent urna diam, cursus ac eleifend mattis,
						euismod et nisi. Vestibulum id leo sit amet nisi. Aliquam erat
						volutpat. Nam egestas mollis ultrices. Praesent nec tellus est, et
						convallis mauris.</p>
				</div>
				<!-- End box-detail -->
			</div>
			<!-- End col-md-4 -->
		</div>
		<!-- End row -->

		<div class="row mt-10 mb-40">
			<div class="col-md-8">
				<div class="line-header">
					<i class="fa fa-list"></i> News
				</div>
				<div id="news-list">
				</div>
				<!-- End News-List -->
				<div class="modal fade bs-example-modal-lg" id="Detail-new"
					tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
					aria-hidden="true">
					<div class="modal-dialog modal-lg-auto">
						<div class="modal-content">
							<div class="modal-body">
								<button type="button" class="close" data-dismiss="modal"
									aria-hidden="true">&times;</button>
								<div id="modal_content" align="center"
									style="height: 500px; overflow: auto;">
									<div class="wrapper">

										<div id="detail-area" class="clearfix">
											<div class="form-list clearfix"
												style="margin-bottom: -120px; margin-top: -30px">
												<div class="clearfix">
												<div class="row col-sm-4">
														<div id="image-news" align="left" style="padding-left: 40px;padding-top: 20px;"></div>
												</div>
												<div class="row col-sm-8">
												<br>
													<h1 style="margin: 0px;" class="text-left"><div id="topic"></div></h1>
													<br>
													<div class="col-sm-12">
														<div id="DetailNews"></div>
													</div>
												</div>
												</div>
											</div>
											<div class="form-list">
												<div class="list-detail-area">
													
												</div>
												<!-- list-detail-area-->
												<div class="text-center mt-80">
													<button id ="close-model" type="button" class="btn btn-primary"
														data-dismiss="modal">
														<i class="fa fa-times"></i> ปิดรายละเอียด
													</button>
												</div>
											</div>
											<br>
										</div>
										<!-- End Detail-area-->

									</div>
								</div>
							</div>

						</div>
					</div>
				</div>
				
			</div>
			<div class="col-md-4" id="banner-right">
				<ul>
					<li><img
						src="${pageContext.request.contextPath}/assets/images/banner-thumb.jpg"
						width="360" height="200" alt="" /></li>
					<li><img
						src="${pageContext.request.contextPath}/assets/images/banner-thumb.jpg"
						width="360" height="200" alt="" /></li>
				</ul>
			</div>
		</div>
		<!-- End row -->

		<div class="footer">Copyright © สงวนลิขสิทธิ์ พ.ศ.2552 โดย
			การประปานครหลวง</div>
		<!-- End footer -->

	</div>
	<c:set var="Status" scope="request" value="${vaStatus}" />
			<c:choose>
				<c:when test="${Status != null && Status=='Forget'}">
				<script>
				$('#successForgetModal').modal();
				</script>
				</c:when>
				<c:when test="${Status != null && Status=='Recover'}">
				<script>
				$('#successRecoverModal').modal();
				</script>
				</c:when>
				<c:when test="${Status != null && Status=='Expired'}">
				<script>
				$('#ExpiredModal').modal();
				</script>
				</c:when>
			</c:choose>
	<script type="text/javascript">
		/* $('.login-button').click(function(){
			alert("eiei");
		}); */
		function forgetPassword() {

			var element = ""
					+ "<div class='box'>"
					+ "<div id='login-box'style='min-width: 360px;min-height: 313px;'>"
					+ "<div class='line-header'>"
					+ "<i class='fa fa-lock'></i> ลืมรหัสผ่าน"
					+ "</div>"
					+ "<div class='box-detail'>"
					+ "<form action='${pageContext.request.contextPath}/IdentifyUserSrvl' name='loginForm' method='post'>"
					+ "<div class='form-group'>"
					+ "<label for='exampleInputEmail1'>ชื่อผู้ใช้</label> <input type='text' class='form-control' placeholder='ชื่อผู้ใช้' name='username' id='inputUsername' value='${UserName}'>"
					+ "<input type='hidden' class='form-control' name='contextPath' id='contextPath' value='${pageContext.request.contextPath}'>"
					+ "</div>"
					+ "<div class='checkbox clearfix'>"
					+ "<button type='submit' class='btn btn-primary pull-right'style='min-width: 84px;'>ตกลง</button>"
					+ "<label style='color: red;'>${vaForgetPasswordMessageError}</label>"
					+ "</div>"
					+ "<div class='mt-20 clearfix'>"
					+ "<div class='pull-right mt-5' align='right'>"
					+ "<a href='${pageContext.request.contextPath}/index.jsp' > <i class='fa fa-user'></i> เข้าสู่ระบบ</a>"
					+ "</div>" + "</div>" + "</form>" + "</div>" + "</div>"
					+ "</div>";
			$("div.box").replaceWith(element);
		}
		function login() {
			var element = ""
					+ "<div class='box'>"
					+ "<div id='login-box'style='min-width: 360px;min-height: 313px;'>"
					+ "<div class='line-header'>"
					+ "<i class='fa fa-user'></i> ลงชื่อเข้าใช้"
					+ "</div>"
					+ "<div class='box-detail'>"
					+ "<form action='${pageContext.request.contextPath}/LoginSrvl' name='loginForm' method='post'>"
					+ "<div class='form-group'>"
					+ "<label for='exampleInputEmail1'>ชื่อผู้ใช้</label> <input type='text' class='form-control' placeholder='ชื่อผู้ใช้' name='username' id='inputUsername' value='${UserName}'>"
					+ "</div>"
					+ "<div class='form-group'>"
					+ "<label for='exampleInputPassword1'>รหัสผ่าน</label> <input type='password' class='form-control' placeholder='รหัสผ่าน'name='password' id='inputPassword'>"
					+ "</div>"
					+ "<div class='checkbox clearfix'>"
					+ "<div class='pull-left'>"
					+ "<label style='color: red;'>${vaLoginMessageError}</label>"
					+ "</div>"
					+ "<button type='submit' class='btn btn-primary pull-right'>เข้าสู่ระบบ</button>"
					+ "</div>"
					+ "<div class='mt-20 clearfix'>"
					+ "<div class='pull-right mt-5' align='right'>"
					+ "<a href='javascript:void()' onclick='forgetPassword();'><i class='fa fa-lock'></i> ลืมรหัสผ่าน</a>"
					+ "</div>" + "</div>" + "</form>" + "</div>" + "</div>"
					+ "</div>";
			$("div.box").replaceWith(element);
		}

		$('.login-button').on('click', function() {
			alert("eiei");
			$('#login-box').removeClass('animated bounceInDown bounceOutUp');

			if ($('#login-box').css('opacity') == 0) {
				$('#login-box').addClass('animated bounceInDown');
				$('#login-box').css('opacity', 1);
			} else {
				$('#login-box').css('opacity', 0);
				$('#login-box').addClass('animated bounceOutUp');
			}
		});
	</script>
	<!-- END JAVASCRIPT -->
</body>
</html>
